import React from 'react'
import Link from 'next/link'
import SortButton from '../SortButton'
import ArticleUserHeader from './ArticleUserHeader'
import CollectNode from '../Collect/CollectNode'

import '../../static/common.css'

export default class ArticleNode extends React.Component {
    render() {
        return (
            <div className="card ArticleNode">
                <ArticleUserHeader user={this.props.user} blog={this.props.blog} />
                <div className="article-list-content">
                    <Link href={{ pathname: '/article', query: { param: this.props.blog.id } }}>
                        <a className="article-title">{this.props.blog.title}</a>
                    </Link>
                    <p className="article-content-short">{this.props.blog.shortContent}</p>
                </div>
                <div className="article-list-footer">
                    <SortButton content={this.props.blog.kind} className="sortButton" />
                    {this.props.type === "collect" ? <CollectNode /> : null}
                </div>
                <style jsx>{`
                   .ArticleNode {
                        margin: 15px 15px 5px 15px;
                   }
                   .article-list-content {
                        margin: 10px 0;
                        padding: 0 5px;
                   }
                   .article-title{
                        font-size: 16px;
                        font-weight: bold;
                   }
                   .article-content-short{
                        margin: 5px 0;
                        padding: 0;
                        font-size: 13px;
                        color: #323232;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
                   }
                   .sortButton{
                        margin: 3px 0;
                   }
                   .collect-status {
                       font-size: 13px
                   }
                `}</style>
            </div>
        )
    }
}